<template>
  <DaprPlusTable
    :table-title="$t('fsb.softwares.balanceLog.list')"
    :entity="entity"
    :grid-options="gridOptions"
    :query-api="crudApi.getPage"
    @update:grid-api="onGridApiUpdate"
  >
    <template #toolbar>
      <a-button
        v-if="selectedRows.length === 1"
        type="primary"
        :disabled="!selectedRows[0].canCancel"
        @click="handleCancel"
      >
        撤销
      </a-button>
    </template>
  </DaprPlusTable>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

import { Button as AButton } from 'ant-design-vue';
import type { ExtendedVxeGridApi, VxeGridProps } from '#/adapter/vxe-table';
import DaprPlusTable from '#/components/daprplus/DaprPlusTable.vue';
import { message, Modal } from 'ant-design-vue';

import {
  getBalanceLogPageApi,
  cancelBalanceLogApi,
  type BalanceLogOutDto,
} from '#/api/fsb/softwares';
import type { EntityInfo } from '#/utils/daprplus';
import { $t } from '#/locales';
import { createCrudApi } from '#/api/daprplus';

const entity: EntityInfo = {
  code: 'BalanceLog',
  display: $t('fsb.softwares.balanceLog.title'),
};
const baseUrl = '/softwares/api/balanceLog';
const crudApi = createCrudApi<never, BalanceLogOutDto>(baseUrl);

// 选中的行
const selectedRows = ref<BalanceLogOutDto[]>([]);

// 扩展配置
const gridOptions: VxeGridProps<BalanceLogOutDto> = {
  columns: [
    { type: 'checkbox', width: 40 },
    {
      field: 'id',
      title: '编号',
      sortable: true,
      width: 130,
    },
    {
      field: 'userName',
      title: '用户名',
      sortable: true,
      align: 'left',
      minWidth: 150,
    },
    {
      field: 'nickName',
      title: '昵称',
      align: 'left',
      minWidth: 150,
    },
    {
      field: 'value',
      title: '余额',
      align: 'right',
      minWidth: 120,
      formatter: ({ cellValue }) => cellValue.toFixed(2),
    },
    {
      field: 'bindValue',
      title: '绑定余额',
      align: 'right',
      minWidth: 120,
      formatter: ({ cellValue }) => cellValue.toFixed(2),
    },
    {
      field: 'isIncome',
      title: '收支类型',
      align: 'center',
      width: 100,
      formatter: ({ cellValue }) => (cellValue ? '收入' : '支出'),
    },
    {
      field: 'balanceValue',
      title: '账户余额',
      align: 'right',
      minWidth: 120,
      formatter: ({ cellValue }) => cellValue.toFixed(2),
    },
    {
      field: 'functionName',
      title: '关联功能',
      align: 'left',
      minWidth: 150,
    },
    {
      field: 'remark',
      title: '备注说明',
      align: 'left',
      minWidth: 300,
    },
    {
      field: 'canCancel',
      title: '可撤销',
      align: 'center',
      width: 80,
      formatter: ({ cellValue }) => (cellValue ? '是' : '否'),
    },
    {
      field: 'createdTime',
      title: '创建时间',
      formatter: 'formatDateTime',
      width: 150,
    },
  ],
  checkboxConfig: {
    checkField: 'checked',
  },
};

let gridApi: ExtendedVxeGridApi;

function onGridApiUpdate(api: ExtendedVxeGridApi) {
  gridApi = api;
}

// 处理选中行变化
function handleCheckboxChange() {
  if (!gridApi) return;
  selectedRows.value = gridApi.getCheckboxRecords();
}

// 处理撤销
async function handleCancel() {
  if (selectedRows.value.length !== 1) return;

  const row = selectedRows.value[0];
  const result = await Modal.confirm({
    iconType: 'warning',
    title: '撤销确认',
    content: `确定要撤销编号为 ${row.id} 的余额明细吗？`,
  });

  if (!result) return;

  try {
    const response = await cancelBalanceLogApi(row.id);
    if (response.type === 'Success') {
      message.success('撤销成功');
      gridApi?.reloadData();
    } else {
      message.error(response.message || '撤销失败');
    }
  } catch (error) {
    console.error('撤销失败:', error);
    message.error('撤销失败');
  }
}

// 监听选中行变化
if (gridApi) {
  gridApi.on('checkbox-change', handleCheckboxChange);
}
</script>

<style scoped></style>
